<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>支付</title>

<!--  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
  <script src="./js/vue2.6.12.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./js/areas.js"></script>
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
  <script type="text/javascript" src="./js/qs.js"></script>
  <script type="text/javascript" src="./js/common.js"></script>

  <link rel="stylesheet" href="./css/common.d1d257d3.css">
<link rel="stylesheet" href="./css/order-confirm.598bbaa8.css">

</head>
<body>

<div id="app">
<div class="header">
  <div class="header-inner">
          <a href="index.html" class="logo" ></a>
    <div class="city-container" >
      <div class="city-selected">
        <div class="city-name">
          &nbsp;
          <!--                        <span class="caret"></span>-->
        </div>
      </div>
      <div class="city-list" >
        <div class="city-list-header">定位城市：<a class="js-geo-city">上海</a></div>
      </div>
    </div>

    <div class="nav">
      <ul class="navbar">
        <li><a href="index.html" >首页</a></li>
        <li><a href="movie.html" >电影</a></li>
        <li><a href="cinema.html" >影院</a></li>
        <li><a href="dashboard.html" target="_blank">榜单</a></li>

      </ul>
    </div>

    <div class="user-info" v-if="islogin">
      <div class="user-avatar has-login">
        <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
        <span class="caret"></span>
        <ul class="user-menu yes-login-menu">
          <li class="text"><a href="./orderlist.html">我的订单</a></li>
          <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
          <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
        </ul>
      </div>
    </div>
    <div class="user-info" v-if="!islogin">
      <div class="user-avatar J-login">
        <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
        <span class="caret"></span>
        <ul class="user-menu no-login-menu">
          <li><a href="javascript:void(0)" @click="login">登录</a></li>
        </ul>
      </div>
    </div>

    <form target="_blank" class="search-form" >
      <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
             autocomplete="off">
      <input class="submit" type="button"  @click="doSearch"/>
    </form>

  </div>
</div>
<div class="header-placeholder"></div>

    <div class="container" >
  <div class="order-progress-bar">
  <div class="step first done">
    <span class="step-num">1</span>
    <div class="bar"></div>
    <span class="step-text">选择影片场次</span>
  </div>
  <div class="step done">
    <span class="step-num">2</span>
    <div class="bar"></div>
    <span class="step-text">选择座位</span>
  </div>
  <div class="step done">
    <span class="step-num">3</span>
    <div class="bar"></div>
    <span class="step-text">5分钟内付款</span>
  </div>
  <div class="step last ">
    <span class="step-num">4</span>
    <div class="bar"></div>
    <span class="step-text">影院取票观影</span>
  </div>
</div>


  <div class="count-down-wrapper">
    <div class="count-down" >
      <p class="time-left">
        请在
        <span class="minute">5</span>
        分钟内完成支付
      </p>
      <p class="tip">超时订单会自动取消，如遇支付问题，请致电客服：8888-8888</p>
    </div>
  </div>

  <p class="warning">请仔细核对场次信息，出票后将<span class="attention">无法退票和改签</span></p>

    <table class="order-table">
    <thead>
      <tr>
        <th>影片</th>
        <th>时间</th>
        <th>影院</th>
        <th>座位</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="movie-name">{{movieName}}</td>
        <td class="showtime">{{startTime}}</td>
        <td class="cinema-name">{{cinemaName}}</td>
        <td>
          <span class="hall">{{hallName}}</span>
          <div class="seats">
            <div>
                <span class="border">{{seatLabel}}</span>
            </div>
            <div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>


  <div class="right">
    <div class="price-wrapper">
      <span>实际支付 :</span>
      <span class="price">{{totalPay}}</span>
    </div>
    <div><div class="pay-btn" @click="confirmPay">确认支付</div></div>
  </div>


<!--    <div class="modal-container" style="display:none">-->
<!--    <div class="modal">-->
<!--      <span class="icon"></span>-->

<!--      <p class="tip">支付超时，该订单已失效，请重新购买</p>-->

<!--        <div class="ok-btn btn">我知道了</div>-->
<!--    </div>-->
<!--  </div>-->
      <div  style="visibility: hidden;">
        <form id="payform" action="http://api.wncinema.com/api/finance/finance/pay">
          <input type="hidden" v-model="orderId" name="orderId"/>
          <input type="hidden" v-model="totalPay" name="money"/>
          <input type="hidden" id="acctoken" name="acctoken">
        </form>
      </div>
    </div>

<div class="footer" style="visibility: visible;"></div>
</div>
</body>
<script>
  let vm = new Vue({
    el: "#app",//绑定，告知vue负责管理页面的哪个部分
    data: {
      islogin:false,
      totalPay:0,//应付款
      orderId:0,
      movieName:'',
      cinemaName:'',
      hallName:'',
      seatLabel:'',
      startTime:'',
      searchKey:''
    },
    methods: {
      //搜索

      /**
       * url:search.html
       * method:get
       * param: searchKey
       * url使用encodeURI编码,例如：encodeURI("search.html?searchKey=万达")
       */
      doSearch() {

      },
      //确认付款
      /**
       * 使用js提交payform表单
       *    let formdom = document.getElementById("payform")
       *    formdom.submit()
       */
      confirmPay(){
        let formdom = document.getElementById("payform")
        let adminToken=getToken()
        document.getElementById("acctoken").value="Bearer "+adminToken;
        formdom.submit()
      },
      logout(){
        // alert('暂时未实现')
        //删除token
        removeToken()
        alert('登出成功')
        // //跳转回主页
        location.href='index.html'
      },
      login(){
        location.href='login.html'
      },
      checkIsLogin(){
        let adminToken=getToken()
        // alert(adminToken)
        if(adminToken){
          this.islogin=true
        }else{
          this.islogin=false
        }
      }
    },


    created() {
      //从其他页面在url中传递的参数中获取
      // 订单id：orderId 、付款金额：totalPay、电影名称：movieName、电影院名称：cinemaName，影厅名称：hallName、座位标签：seatLabel、播放开始时间：startTime
      this.orderId = GetQueryString("orderId")
      this.totalPay = GetQueryString("totalPay")
      this.movieName = GetQueryString("movieName")
      this.cinemaName = GetQueryString("cinemaName")
      this.hallName = GetQueryString("hallName")
      this.seatLabel = GetQueryString("seatLabel")
      this.startTime = GetQueryString("startTime")

    }
  })
</script>
</html>
